<template>
  <div>
    <a-form-model :model="config" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
      <a-form-model-item label="步骤名称">
        <a-input v-model="config.name" />
      </a-form-model-item>
      <a-form-model-item label="数据库连接">
        <a-select v-model="config.connection">
          <a-select-option v-for="connection in connections" :key="connection.name">
            {{ connection.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="查询语句">
        <sql-editor ref="sql-editor" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import SqlEditor from '../../components/SQLEditor'

export default {
  name: 'TableInput',
  components: {
    SqlEditor
  },
  data() {
    return {
      connections: [
        {
          name: 'localhost',
          host: 'localhost',
          port: 3306,
          username: 'root',
          password: 'root',
          database_name: 'kettle_example'
        }
      ],
      config: {
        name: '表输入',
        connection: ''
      }
    }
  },
  methods: {
    getConfig() {
      const config = this.config
      config.url = this.$refs['sql-editor'].sql
      return config
    }
  }
}
</script>

<style scoped>

</style>
